<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container">
            <el-input placeholder="请输入内容" v-model="listQuery.seqName" style="width: 300px;">
                <template slot="prepend">序列名称：</template>
            </el-input>
            <el-input v-model="listQuery.bankkey" :disabled="true" style="width: 300px;margin-left: 35px;">
                <template slot="prepend">租户标识：</template>
            </el-input>
            <el-select v-model="listQuery.serial" placeholder="是否连续标志：" style="width: 300px;margin-left: 30px;">
                <el-option v-for="item in continues" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" icon="search" style="margin-left: 50px;" @click="findSequence()">查询</el-button>
            <el-button type="primary" icon="plus" @click="addSequence()">新增</el-button>

        </div>

        <el-table :data="list" v-loading="listLoading" element-loading-text="别着急，喝杯咖啡。。。" stripe border
                  style="width: 100%;">
            <el-table-column prop="seqName" align="center" label="序列名称">
                <template scope="scope">
                    <span>{{scope.row.seqName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bankkey" align="center" label="租户标识">
                <template scope="scope">
                    <span>{{scope.row.bankkey}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="minVal" align="center" label="最小值">
                <template scope="scope">
                    <span>{{scope.row.minVal}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="maxVal" align="center" label="最大值">
                <template scope="scope">
                    <span>{{scope.row.maxVal}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="increaseVal" align="center" label="步长">
                <template scope="scope">
                    <span>{{scope.row.increaseVal}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="serial" align="center" label="是否连续标志">
                <template scope="scope">
                    <span>{{continues[scope.row.serial]}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="cycle" align="center" label="是否循环">
                <template scope="scope">
                    <span>{{loop[scope.row.cycle]}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template scope="scope">
                    <a class="aColor" @click="updateSequence(scope.row)">调整步长</a>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>


        <el-dialog title="序列管理" :visible.sync="sequenceManagement">
            <el-form class="small-space" inline="inline" :model="addQuery" ref="addQuery" :rules="rules"
                     label-position="right" label-width="150px">
                <el-form-item label="序列名称：" prop="seqName">
                    <el-input v-model="addQuery.seqName" name="seqName"></el-input>
                </el-form-item>
                <el-form-item label="租户标识：" prop="bankkey">
                    <el-input v-model="addQuery.bankkey" :disabled="true" name="bankkey"></el-input>
                </el-form-item>
                <el-form-item label="初始值：" prop="minVal">
                    <el-input v-model="addQuery.minVal" name="minVal"></el-input>
                </el-form-item>
                <el-form-item label="最大值：" prop="maxVal">
                    <el-input v-model="addQuery.maxVal" name="maxVal"></el-input>
                </el-form-item>
                <el-form-item label="步长：" prop="increaseVal">
                    <el-input v-model="addQuery.increaseVal" name="increaseVal"></el-input>
                </el-form-item>
                <el-form-item label="序列长度：" prop="charLength">
                    <el-input v-model="addQuery.charLength" name="charLength"></el-input>
                </el-form-item>
                <el-form-item label="序列前缀：">
                    <el-input v-model="addQuery.prefix"></el-input>
                </el-form-item>
                <el-form-item label="日期格式：">
                    <el-input v-model="addQuery.appendDateFormat"></el-input>
                </el-form-item>
                <el-form-item label="是否连续标志：">
                    <el-select v-model="addQuery.serial" placeholder="请选择">
                        <el-option v-for="(value,key) in continues" :key="key" :label="value" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否循环：">
                    <el-select v-model="addQuery.cycle" placeholder="请选择">
                        <el-option v-for="(value,key) in loop" :key="key" :label="value" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="sequenceManagement = false">取 消</el-button>
                <el-button type="primary" @click="submitApply">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="步长更新" :visible.sync="increaseValUpd">
            <el-form class="small-space" inline="inline" :model="addQuery" label-position="right" label-width="150px">
                <el-form-item label="序列名称：">
                    <el-input v-model="addQuery.seqName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="租户标识：">
                    <el-input v-model="addQuery.bankkey" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="初始值：">
                    <el-input v-model="addQuery.minVal" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="最大值：">
                    <el-input v-model="addQuery.maxVal" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="步长：">
                    <el-input v-model="addQuery.increaseVal"></el-input>
                </el-form-item>
                <el-form-item label="序列长度：">
                    <el-input v-model="addQuery.charLength" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="序列前缀：">
                    <el-input v-model="addQuery.prefix" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="日期格式：">
                    <el-input v-model="addQuery.appendDateFormat" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="是否连续标志：">
                    <el-select v-model="addQuery.serial" placeholder="请选择" :disabled="true">
                        <el-option v-for="(value,key) in continues" :key="key" :label="value" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否循环：">
                    <el-select v-model="addQuery.cycle" placeholder="请选择" :disabled="true">
                        <el-option v-for="(value,key) in loop" :key="key" :label="value" :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="increaseValUpd = false">取 消</el-button>
                <el-button type="primary" @click="submitUpd">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
	import { sequenceList, findSequence, sequenceUpd } from '@/api/sequence/sequence'
	export default {
		name: 'appManage',
		data() {
			return {
				list: null,
				total: null,
				increaseValUpd: false,
				listLoading: true,
				sequenceManagement: false,
				code: null,
				inline: true,
				addQuery: {
					serial: '0',
					bankkey: 'zjrcu',
					seqName: null,
					minVal: null,
					maxVal: null,
					increaseVal: null,
					cycle: 'N',
					charLength: null,
					prefix: null,
					appendDateFormat: null
				},
				listQuery: {
					start: 1,
					limit: 20,
					bankkey: 'zjrcu',
					seqName: null,
					serial: null
				},
				temp: {
					name: '',
					description: '',
					email: ''
				},
				dialogFormVisible: false,
				tableKey: 0,
				continues: {
					'0': '否',
					'1': '是'
				},
				loop: {
					'N': '否',
					'Y': '是'
				},
				value8: '',
				rules: {
					seqName: [{
						required: true, trigger: 'blur', message: '序列名称不能为空'
					}],
					bankkey: [{
						required: true, trigger: 'blur', message: '租户标识不能为空'
					}],
					minVal: [{
						required: true, trigger: 'blur', message: '初始值不能为空'
					}],
					maxVal: [{
						required: true, trigger: 'blur', message: '最大值不能为空'
					}],
					increaseVal: [{
						required: true, trigger: 'blur', message: '步长不能为空'
					}],
					charLength: [{
						required: true, trigger: 'blur', message: '序列长度不能为空'
					}]
				}
			}
		},
		created() {
			this.findSequence()
		},
		methods: {
			findSequence() {
				findSequence(this.listQuery).then(response => {
					this.list = response.data.root
					this.total = response.data.total
					this.listLoading = false
				})
			},
			submitUpd() {
				sequenceUpd(this.addQuery).then(response => {
					this.findSequence()
					const h = this.$createElement
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '提交成功')
					})
					this.increaseValUpd = false
				})
				this.findSequence()
			},
			submitApply() {
				this.$refs.addQuery.validate(valid => {
					const h = this.$createElement
					if (valid) {
						sequenceList(this.addQuery).then(response => {
							this.findSequence()
							this.$notify({
								title: '提示',
								type: 'success',
								message: h('i', { style: 'color: teal' }, '添加成功')
							})
							this.sequenceManagement = false
						})
					}
				})
			},
			updateSequence(row) {
				this.addQuery = Object.assign({}, row)
				this.increaseValUpd = true
			},
			addSequence() {
				this.addQuery = Object.assign({}, this.$options.data().addQuery)
				this.sequenceManagement = true
				this.$refs.addQuery.resetFields()
			},
			init() {
				this.findSequence()
			},
			handleSizeChange(val) {
				this.listQuery.limit = val
				this.findSequence()
			},
			handleCurrentChange(val) {
				this.listQuery.page = val
				this.findSequence()
			}
		}
	}

</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .el-form {
        width: 800px;
        margin-left: 70px;
        .el-form-item__content {
            margin-left: 0;
            .el-input, .el-select, .el-textarea {
                width: 185px
            }
        }
    }
</style>
